<template>
  <div class="content">
    <Header></Header>
    <div class="list">
      <div class="list-top">
        <img src="@/assets/1.jpg" alt="" />
      </div>
      <div class="list-block">
        <div class="list-one" v-for="i in listArr" :key="i.item_id">
          <router-link :to="`/item/${i.item_id}/${i.min_price}`">
            <div class="list-img">
              <img :src="i.over_image_url" />
            </div>
            <div class="list-msg">
              <div>
                {{ i.item_name }}
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";

export default {
  name: "Home",
  data() {
    return {
      listArr: [],
    };
  },
  created() {
    this.$axios.get("./json/list.json").then((res) => {
      this.listArr = res.data.data.item_list;
      console.log(this.listArr);
    });
  },
  components: {
    Header,
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  overflow: scroll;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* margin-top: 1.466667rem; */
}

.list {
  width: 100%;
  padding: 0 0.4rem;
  flex: 1;
  overflow-y: auto;
}

.list .list-top {
  width: 100%;
  height: 0.373333rem;
  padding: 0.266667rem 0.266667rem;
  margin-top: 0.266667rem;
}

.list .list-top img {
  width: 100%;
}
.list .list-block,
a {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 0.266667rem;
}

.list .list-block .list-one {
  width: 4.4rem;
  height: 8.053333rem;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 rgb(181 197 220 / 36%);
  border-radius: 8px;
  margin: 0.266667rem 0.08rem;
}

.list-img {
  width: 4.48rem;
  height: 4.48rem;
}

.list-img img {
  width: 100%;
}

.list-msg {
  width: 4.213333rem;
  height: 3.866667rem;
  padding: .266667rem;
}
</style>
